<template>
    <div>
        <el-button
            size="mini"
            type="primary"
            :loading="binNumLoading"
            class="refresh-btn"
            @click="isRefresh"
            icon="el-icon-refresh"
            >刷新</el-button
        >
        <div
            class="box-card"
            v-loading="tab1Loading"
            element-loading-background="rgba(0, 0, 0, 0.08)"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
        >
            <el-form
                ref="binForm"
                :model="binForm"
                class="binForm"
                label-width="85px"
            >
                <el-row :gutter="10" style="width:100%">
                    <el-col
                        :lg="8"
                        :xl="6"
                        v-for="(one, index) in binForm.entitys"
                        :key="index"
                    >
                        <el-card style="width: 100%" class="one-card">
                            <el-button
                                type="primary"
                                class="binIndex-btn"
                                :circle="true"
                                >{{ index + 1 }}</el-button
                            >
                            <div class="boxForm bin-form">
                                <el-form-item label="需求电压：">
                                    <span>{{ one["07010060"] }} V</span>
                                </el-form-item>
                                <el-form-item label="需求电流：">
                                    <span>{{ one["07010061"] }} A</span>
                                </el-form-item>
                                <el-form-item label="总电压：">
                                    <span
                                        >{{
                                            toFixed(one["07010062"], 1)
                                        }}
                                        V</span
                                    >
                                </el-form-item>
                                <el-form-item label="总电流：">
                                    <span
                                        >{{
                                            toFixed(one["07010063"], 1)
                                        }}
                                        A</span
                                    >
                                </el-form-item>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form>

            <div class="no-data">
                <el-empty
                    v-if="binForm.entitys.length == 0"
                    description="暂无数据"
                ></el-empty>
            </div>
        </div>
    </div>
</template>

<script>
import { handleConfirm } from "@/utils/messageBox";
import { equipment } from "@/api/factuer";

export default {
    props: {
        currentRow: {
            typeof: Object,
            default: () => {},
        },
        portVisible: {
            typeof: Boolean,
            default: false,
        },
    },
    data() {
        return {
            binNumLoading: false,
            binForm: { entitys: [] },
            tab1Loading: false,
            binNum: 0, //端口数量
        };
    },
    watch: {
        portVisible: {
            handler(value) {
                if (value) {
                    this.readBinIndex();
                } else {
                    //弹框关闭，数据重置
                    this.resetData();
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        toFixed(val, num) {
            return val ? (val / Math.pow(10, num)).toFixed(num) : 0;
        },
        isRefresh() {
            handleConfirm(`确定要刷新吗？`, "warning", "提示")
                .then((res) => {
                    this.doRead();
                })
                .catch((err) => {});
        },

        resetData() {
            this.binForm = { entitys: [] };

            this.tab1Loading = false;
            this.binNumLoading = false;
            this.binNum = 0;
        },
        isRefresh() {
            handleConfirm(`确定要刷新吗？`, "warning", "提示")
                .then((res) => {
                    if (this.binNum) {
                        this.binNumLoading = true;
                        this.doRead();
                    } else {
                        this.readBinIndex();
                    }
                })
                .catch((err) => {});
        },
        // 读取端口数量 07010059
        readBinIndex() {
            this.tab1Loading = true;
            let params = {
                entitys: [
                    {
                        id: "07010059",
                    },
                ],
                equipId: this.currentRow.id,
            };
            equipment("/operate/param/read", "post", params, 1)
                .then((res) => {
                    let datas = res.data;
                    datas.forEach((item) => {
                        if (item.id == "07010059") {
                            this.binNum = item.value;
                        }
                    });
                    // 端口数量获取完成，读取参数
                    if (this.binNum) {
                        this.doRead();
                    }
                })
                .finally(() => {
                    this.tab1Loading = false;
                });
        },
        doRead() {
            this.tab1Loading = true;
            let params = {
                entitys: [],
                equipId: this.currentRow.id,
            };
            this.binForm = {
                entitys: [],
            };
            let one = {
                "07010060": undefined,
                "07010061": undefined,
                "07010062": undefined,
                "07010063": undefined,
            };
            for (let i = 0; i < this.binNum; i++) {
                this.binForm.entitys.push(one);
                params.entitys.push(
                    { addrId: i + 1, id: "07010060" },
                    { addrId: i + 1, id: "07010061" },
                    { addrId: i + 1, id: "07010062" },
                    { addrId: i + 1, id: "07010063" }
                );
            }
            for (const key in this.cardForm) {
                params.entitys.push({ id: key });
            }
            equipment("/operate/param/read", "post", params, 1)
                .then((res) => {
                    let datas = res.data;
                    datas.forEach((item) => {
                        this.binForm.entitys.forEach((pp, index) => {
                            for (const key in pp) {
                                if (
                                    item.addrId == index + 1 &&
                                    item.id == key
                                ) {
                                    pp[key] = item.value;
                                }
                            }
                        });
                    });
                })
                .finally(() => {
                    this.tab1Loading = false;
                    this.binNumLoading = false;
                });
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.box-card {
    margin: 0 0 10px;
    ::v-deep .el-card__body {
        padding: 10px 0;
    }
    ::v-deep .el-card__header {
        padding: 10px;
        font-weight: bold;
        font-size: 16px;
    }
}
.binForm {
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;
    .el-card {
        // width: 24.25% !important;
        margin-bottom: 10px;
    }
    .el-form-item {
        width: 100%;
        height: 22px;
        margin-bottom: 0;
        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
            line-height: 22px;
        }
    }
    ::v-deep .el-card__body{
        @include flexLayout(center, flex-start);
    }
}
.binIndex-btn {
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin: 0 10px;
    background-color: #409eff;
    border-color: #409eff;
}
.refresh-btn {
    position: absolute;
    top: 16px;
    right: 50px;
}
.no-data {
    width: 100%;
    text-align: center;
}
</style>
